{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息 - 电商库存管理系统</title>
    <!-- 引入Chart.js库用于图表展示 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        /* 导航栏容器 */
        .navbar {
            background-color: #2c3e50;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            height: 52px; /* 统一高度 */
        }

        /* 导航链接样式 */
        .navbar a {
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 鼠标悬停效果 */
        .navbar a:hover {
            background-color: #3498db;
        }

        /* 当前活动页签 */
        .navbar a.active {
            background-color: #2980b9;
        }

        /* 主要内容容器 */
        .main-content {
            padding: 20px;
            margin-top: 60px;
        }

        /* 图表容器通用样式 */
        .chart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1),
                        0 6px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
            height: 500px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .chart-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15),
                        0 10px 10px rgba(0, 0, 0, 0.1);
        }

        .chart-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }

        /* 图表canvas样式 */
        .chart {
            width: 100% !important;
            height: 400px !important;
        }

        /* 两列布局 */
        .two-columns {
            display: flex;
            gap: 20px;
        }

        .two-columns .chart-container {
            flex: 1;
        }

        .navbar svg {
            fill: white;
            margin-right: 5px;
            position: relative;
            top: 4px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <a href="{% url 'index' %}">
            <svg t="1744378877217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" width="20" height="20">
                <path d="M878.482153 464.406184L558.225616 193.502577a71.195266 71.195266 0 0 0-92.353503 0L145.517847 464.406184v64.012216l73.003245-61.764458v306.183622c0 37.332315 30.295858 67.628173 67.628173 67.628174h452.483298c37.332315 0 67.628173-30.295858 67.628174-67.628174V467.142584l72.319145 61.178088v-64.012216zM594.287459 791.699179H429.712541v-150.502004c0-45.346058 36.941401-82.287459 82.287459-82.287459s82.287459 36.941401 82.287459 82.287459v150.502004z m163.011262-18.763886c0 10.359229-8.404657 18.763886-18.763886 18.763886h-95.383088v-150.502004c0-72.319145-58.832602-131.151747-131.151747-131.151746s-131.151747 58.832602-131.151747 131.151746v150.502004h-94.698988a18.763886 18.763886 0 0 1-18.763886-18.763886V425.412483L497.438442 230.834892c8.404657-7.134186 20.718458-7.134186 29.220844 0l230.639435 195.163963V773.033022z" p-id="2906"></path>
            </svg>
            首页
        </a>
        <a href="{% url 'user' %}" class="active">
            <svg t="1744381512123" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3903" width="20" height="20">
                <path d="M512 447.223c-88.224 0-160-71.776-160-160s71.776-160 160-160c88.225 0 160 71.776 160 160s-71.775 160-160 160z m0-256c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zM454.901 870.594c-96.594 0-184.933-3.802-231.263-49.955C203.308 800.386 193 774.164 193 742.701c0-31.629 10.247-62.812 30.457-92.686 17.978-26.573 42.908-50.741 74.098-71.833C359.256 536.46 437.418 512.53 512 512.53c74.55 0 152.55 23.943 214.002 65.691 31.05 21.094 55.861 45.273 73.746 71.867C819.822 679.937 830 711.096 830 742.701c0 31.552-10.317 57.827-30.664 78.097-50.714 50.521-151.822 50.128-258.88 49.723a7395.45 7395.45 0 0 0-56.914-0.001c-9.605 0.037-19.163 0.074-28.641 0.074zM512 806.447c9.567 0 19.149 0.037 28.701 0.073 49.52 0.191 96.284 0.37 135.808-4.396 38.418-4.633 64.546-13.604 77.659-26.668 5.079-5.06 11.832-13.96 11.832-32.755 0-38.089-27.688-78.744-75.963-111.54C638.933 596.442 574.04 576.53 512 576.53c-126.309 0-255 83.862-255 166.171 0 18.675 6.738 27.547 11.807 32.596 32.045 31.922 128.975 31.55 214.491 31.224 9.556-0.037 19.139-0.074 28.702-0.074z" fill="" p-id="3904"></path>
            </svg>
            用户信息
        </a>
        <a href="{% url 'shop' %}">
            <svg t="1744383464603" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6572" width="20" height="20"><path d="M924 467.1H768.2c-10.8 0-19.5 8.7-19.5 19.5s8.7 19.5 19.5 19.5h136.3v331.1H690.3V175c0-21.5-17.4-38.9-38.9-38.9H378.7c-21.5 0-38.9 17.4-38.9 38.9v662.1H125.6V408.7h136.3c10.8 0 19.5-8.7 19.5-19.5s-8.7-19.5-19.5-19.5H106.1c-10.8 0-19.5 8.7-19.5 19.5v467.4c0 10.8 8.7 19.5 19.5 19.5H924c10.8 0 19.5-8.7 19.5-19.5v-370c0-10.8-8.8-19.5-19.5-19.5z m-272.6 370H378.7V213.9c0-21.5 17.4-38.9 38.9-38.9h194.7c21.5 0 38.9 17.4 38.9 38.9v623.2zM456.6 311.3v19.5H515v97.4h39V252.9h-39l-58.4 58.4z" p-id="6573"></path></svg>
            排行榜
        </a>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 商铺类型柱状图 -->
        <div class="chart-container">
            <div class="chart-title">商铺类型分布</div>
            <canvas id="shopTypeChart" class="chart"></canvas>
        </div>

        <!-- 两列布局 -->
        <div class="two-columns">
            <!-- 用户地区分布饼状图 -->
            <div class="chart-container">
                <div class="chart-title">用户地区分布</div>
                <canvas id="regionPieChart" class="chart"></canvas>
            </div>

            <!-- 跨境对比图 -->
            <div class="chart-container">
                <div class="chart-title">跨境与非跨境商铺对比</div>
                <canvas id="crossBorderChart" class="chart"></canvas>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 商铺类型柱状图
            const shopTypeCtx = document.getElementById('shopTypeChart').getContext('2d');
            const shopTypeChart = new Chart(shopTypeCtx, {
                type: 'bar',
                data: {
                    labels: ['普通店铺', '旗舰店', '专营店', '专卖店'],
                    datasets: [{
                        label: '商铺类型数量',
                        data: [
                            {{ shop_types.normal }},
                            {{ shop_types.flagship }},
                            {{ shop_types.franchise }},
                            {{ shop_types.exclusive }}
                        ],
                        backgroundColor: 'rgba(52, 152, 219, 0.8)',
                        borderColor: 'rgba(52, 152, 219, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '数量'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '商铺类型'
                            }
                        }
                    }
                }
            });

            // 用户地区分布饼状图
            const regionPieCtx = document.getElementById('regionPieChart').getContext('2d');
            // 准备省份数据
            const provinceLabels = [
                {% for province, count in province_data.items %}
                    '{{ province }}',
                {% endfor %}
            ];
            const provinceData = [
                {% for province, count in province_data.items %}
                    {{ count }},
                {% endfor %}
            ];
            // 颜色数组
            const backgroundColors = [
                'rgba(52, 152, 219, 0.8)',
                'rgba(46, 204, 113, 0.8)',
                'rgba(155, 89, 182, 0.8)',
                'rgba(241, 196, 15, 0.8)',
                'rgba(231, 76, 60, 0.8)',
                'rgba(52, 73, 94, 0.8)',
                'rgba(26, 188, 156, 0.8)',
                'rgba(230, 126, 34, 0.8)'
            ];
            const borderColors = [
                'rgba(52, 152, 219, 1)',
                'rgba(46, 204, 113, 1)',
                'rgba(155, 89, 182, 1)',
                'rgba(241, 196, 15, 1)',
                'rgba(231, 76, 60, 1)',
                'rgba(52, 73, 94, 1)',
                'rgba(26, 188, 156, 1)',
                'rgba(230, 126, 34, 1)'
            ];

            const regionPieChart = new Chart(regionPieCtx, {
                type: 'pie',
                data: {
                    labels: provinceLabels,
                    datasets: [{
                        data: provinceData,
                        backgroundColor: backgroundColors.slice(0, provinceLabels.length),
                        borderColor: borderColors.slice(0, provinceLabels.length),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });

            // 当前跨境和非跨境商铺统计数据 
            const crossBorderCount = {{ cross_border_shops }};
            const nonCrossBorderCount = {{ non_cross_border_shops }};
            
            // 跨境对比图 - 使用折线图显示月度趋势和当前统计
            const crossBorderCtx = document.getElementById('crossBorderChart').getContext('2d');
            const crossBorderChart = new Chart(crossBorderCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    datasets: [{
                        label: '跨境商铺',
                        data: {{ cross_border_monthly|safe }},
                        backgroundColor: 'rgba(52, 152, 219, 0.2)',
                        borderColor: 'rgba(52, 152, 219, 1)',
                        borderWidth: 2,
                        tension: 0.3,
                        fill: true
                    }, {
                        label: '非跨境商铺',
                        data: {{ non_cross_border_monthly|safe }},
                        backgroundColor: 'rgba(46, 204, 113, 0.2)',
                        borderColor: 'rgba(46, 204, 113, 1)',
                        borderWidth: 2,
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: `当前统计: 跨境商铺 ${crossBorderCount} 家, 非跨境商铺 ${nonCrossBorderCount} 家`,
                            position: 'bottom'
                        },
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '商铺数量'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '月份'
                            }
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    }
                }
            });
        });
    </script>
</body>
</html>